<template>
  <view class="home">
    <view class="home-search">
      <my-search @myToSite="toSite"></my-search>
    </view>
    <text class="home-text">你想去哪儿？</text>
    <view class="home-nav" >
      <block v-for="(item,i) in nav" :key="i">
        <text :class="i == index? 'x':'y'" @click="changeIndex(i)">{{item}}</text>
      </block>
    </view>
    <view class="home-swtich">
      <view class="home-text-item">
        <text>{{info.length}}个推荐景点</text>
        <navigator url="#">查看全部</navigator>
      </view>
        <swiper  :indicator-dots="true" :autoplay="true" circular="true" :interval="3000" :duration="1000">
          <swiper-item v-for="(item ,i) in info" :key="i">
            <view class="icons" @click="changeIsStore(i,item.isStore)">
              <uni-icons :type="item.isStore?'heart-filled':'heart'" color="red" size="30"></uni-icons>
            </view>
            <view class="img-bottom">
              <text>{{item.country}}</text>
              <uni-rate :size="15" v-model="item.num"/>
              <text>每年{{item.text}}万次旅行</text>
            </view>
            <image :src="item.img" class="img"></image>
          </swiper-item>
        </swiper>
    </view>
    <view class="home-suggest">
      <text>旅途推荐</text>
      <block v-for="(sugg,i) in suggs" :key="i">
        <view class="home-suggest-sugg">
          <my-suggest :sugg="sugg"></my-suggest>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
  import tabbarBadge from '@/mixins/tabbar-badge.js'
  export default {
    mixins:[tabbarBadge],
    data() {
      return {
        nav: ['国家','旅行','户外冒险','假期旅行'],
        index: 0,
        mycurrent:0,
        info: [
          {
            isStore: false,
            country: '中国 Chine',
            num:5,
            img: 'https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/278/f44d307589c5202312980d.jpg',
            text: 998.56
          }
        ,
        {
          isStore: true,
          country: '美国 America',
          num:3,
          img: 'https://image.archiposition.com/2018/12/01_Golden-Gate_Bridge-Gothic.jpg',
          text: 458.8
        },
        {
          isStore: true,
          country: '法国 France',
          num:3,
          img: 'https://nimg.ws.126.net/?url=https://dingyue.ws.126.net/2021/1101/6e186a99j00r1uq480013d000hs00b4g.jpg&thumbnail=650x2147483647&quality=80&type=jpg',
          text: 458.8
        }
                
        ],
        suggs: [
          {
            img: 'https://img2.baidu.com/it/u=3577383383,4098815069&fm=253&fmt=auto&app=138&f=JPEG',
            text: '中国必去十大景点',
            time: '2022 - 12月'
          },
          {
            img: 'https://n.sinaimg.cn/sinakd20122/30/w1080h1350/20201210/2fdf-keyancx8665021.jpg',
            text: '最美黄昏',
            time: '2022 - 12月'
          }
        ]
      };
    },
    computed: {
      // len() {
      //   return this.info.length? info.length:0
      // }
    },
    methods: {
      changeIndex (i){
        this.index = i 
        console.log(this.index)
      },
     
      changeIsStore (i,isStore) {
        console.log(i + "您第卅" + isStore)
        console.log('前'+this.info[i].isStore)
        this.info[i].isStore = !isStore
         console.log('后'+this.info[i].isStore)
      },
      toSite() {
        uni.redirectTo({
          url:'/subpkg/search/search'
        })
      }
    }
  }
</script>

<style lang="scss">
.home {
  perspective: 100px;
  .home-text {
    font-size: 20px;
    font-weight: bold;
    padding-left: 20rpx;
  }
  .home-nav {
    display: flex;
    justify-content: space-around;
    margin: 10px 0 15px 0;
    .x {
      color: #1296db;
    }
    .y {
      color: black;
    }
  }
  .home-swtich {
    height: 600rpx;
    position: relative;
    text-align: center;
    padding: 0 20rpx;
    .home-text-item {
      display: flex;
      justify-content: space-between;
      color: #1296db;
      margin: 20px 0;
      text{
        color: black;
      }
    }
    // perspective: 1000px;
      swiper {
        display: block;
        height: 200px;
      }
    
    .icons{
      width:40px;
      height: 40px;
      border-radius: 60%;
      background-color: white;
      position: absolute;
      right: 100rpx;
      top: 3px;
      align-items: center;
      display: flex;
      justify-content: center;
      
    }
    .img-bottom {
      position: absolute;
      bottom: 10px;
      left: 100rpx;
      color: white;
      text-align: left;
      margin-bottom: 10px;
      text {
        display: block;
        padding: 5px 0;
      }
    }
    .img {
      // transform: translate3d(0,0,-100px);
      width: 80%;
      height: 100%;
      border-radius: 5%;
    }
  }
 .home-suggest {
   width: 100%;
   margin: 0 20rpx;
   text{
     font-size: 15px;
     font-weight: bold;
   }
   .home-suggest-sugg {
     padding: 20rpx 0;
     padding-right: 20rpx;
   }
 } 
}
  
  
</style>
